<template>
	<div class="flex-warp mb15" v-if="data.length > 0">
		<el-row :gutter="15">
			<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in data" :key="k">
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<div class="item-img">
							<img :src="v.goodsHomeImg" />
						</div>
						<div class="item-txt">
							<div class="item-txt-title">{{ v.spuName }}</div>
							<div class="item-txt-other">
								<div style="width: 100%">
									<div class="item-txt-msg mb10">
										<span>库存 {{ v.goodsStock }}</span>
										<!-- <span class="ml10">收藏 {{ v.goodsStock }}</span> -->
									</div>
									<div class="item-txt-msg item-txt-price">
										<span class="font-price">
											<span>￥</span>
											<span class="font">{{ v.goodsRetailPrice }}</span>
										</span>
										<span>销量{{ v.goodsSalesVolume }}笔</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
	<div v-else class="filtering-no-data">
		<div class="no-data-box">
			<i class="el-icon-search"></i>
			<div class="no-txt">暂无数据</div>
		</div>
	</div>
	<template v-if="data.length > 0">
		<el-pagination v-model:current-page="state.page.pageIndex" v-model:page-size="state.page.pageSize" :pager-count="5"
			:page-sizes="[20, 50, 100, 200, 500, 1000, 10000]" :total="total"
			layout="total, sizes, prev, pager, next, jumper" background @size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange">
		</el-pagination>
	</template>
</template>
<script setup lang="ts" name="rowCard">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
// 定义父组件传过来的值
const props = defineProps({
	// 列表内容
	data: {
		type: Array,
		default: () => [],
	},
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['pageChange']);
// 定义变量内容
const router = useRouter();
const state = reactive({
	page: {
		pageNum: 1,
		pageSize: 10,
	},
	selectlist: [] as EmptyObjectType[],
	checkListAll: true,
	checkListIndeterminate: false,
});

// 页面加载时
onMounted(() => { });

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.page.pageSize = val;
	emit('pageChange', state.page);
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.page.pageNum = val;
	emit('pageChange', state.page);
};
</script>
<style scoped lang="scss">
.filtering {
	.filtering-list {
		overflow: hidden;
		border-bottom: none !important;

		.filtering-list-flex {
			&:last-of-type {
				.filtering-list-item {
					border-bottom: none !important;
				}
			}

			.filtering-list-title {
				float: left;
				width: 64px;
				font-weight: 700;
				position: relative;
				color: #909399;
				margin: 15px 0;

				&:after {
					content: '';
					position: absolute;
					border: 1px solid #909399;
					border-width: 0 1px 1px 0;
					width: 4px;
					height: 4px;
					transform: rotate(-45deg) translateY(-50%);
					right: 10px;
					top: 50%;
				}
			}

			.filtering-list-item {
				border-bottom: 1px dotted var(--next-border-color-light);
				margin-left: 64px;
				overflow: hidden;
				position: relative;

				.span {
					color: #8d8d91;
					font-size: 14px;
					float: left;
					padding: 0 15px;
					margin: 15px 0;

					&:hover {
						color: var(--el-color-primary);
						cursor: pointer;
					}
				}

				.dd-active {
					color: var(--el-color-primary);
				}

				.dd-more {
					font-size: 12px;
					position: absolute;
					right: 0;
					top: 16px;
					color: #a5a5a5;

					&:hover {
						cursor: pointer;
						color: #8d8d91;
					}
				}
			}
		}
	}

	.br-top-no {
		border-top: none;

		.flex-warp {
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			margin: 0 -5px;

			::v-deep .el-row {
				flex: 1 1 0%;
			}

			.flex-warp-item {
				padding: 5px;
				width: 100%;
				height: 360px;

				.flex-warp-item-box {
					border: 1px solid var(--next-border-color-light);
					width: 100%;
					height: 100%;
					border-radius: 2px;
					display: flex;
					flex-direction: column;
					transition: all 0.3s ease;

					&:hover {
						cursor: pointer;
						border: 1px solid var(--el-color-primary);
						transition: all 0.3s ease;
						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);

						.item-txt-title {
							color: var(--el-color-primary) !important;
							transition: all 0.3s ease;
						}

						.item-img {
							img {
								transition: all 0.3s ease;
								transform: translateZ(0) scale(1.05);
							}
						}
					}

					.item-img {
						width: 100%;
						height: 215px;
						overflow: hidden;

						img {
							transition: all 0.3s ease;
							width: 100%;
							height: 100%;
						}
					}

					.item-txt {
						flex: 1;
						padding: 15px;
						display: flex;
						flex-direction: column;
						overflow: hidden;

						.item-txt-title {
							text-overflow: ellipsis;
							overflow: hidden;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							display: -webkit-box;
							color: #666666;
							transition: all 0.3s ease;
							font-weight: bold;

							&:hover {
								color: var(--el-color-primary);
								text-decoration: underline;
								transition: all 0.3s ease;
							}
						}

						.item-txt-other {
							flex: 1;
							align-items: flex-end;
							display: flex;

							.item-txt-msg {
								font-size: 12px;
								color: #8d8d91;
							}

							.item-txt-price {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.font-price {
									color: #ff5000;

									.font {
										font-size: 22px;
									}
								}
							}
						}
					}
				}
			}
		}

		:deep(.el-card__body) {
			height: 100%;

			.filtering-no-data {
				display: flex;
				height: 100%;

				.no-data-box {
					color: #cccccc;
					margin: auto;

					i {
						font-size: 70px;
					}

					.no-txt {
						font-size: 14px;
						text-align: center;
						margin-top: 15px;
					}
				}
			}
		}
	}

	.min-h-360 {
		height: 360px;
	}
}</style>
